<template>
    <view class="content">

        <view style="margin-top: 0px;">

            <view style="width: 100vw; height: 40px; background-color: white;">
                <!-- filterData:筛选数据  defaultIndex： 默认选择序列 @onSelected:选择事件 返回选择的值-->
                <chenchuang-CCDropDownFilter :filterData='filterData' :defaultIndex='defaultIndex' :game2="game"
                    @onSelected='ed' @onShaixuan='ed2'></chenchuang-CCDropDownFilter>
            </view>

        </view>
		
		<view class="lists">
			<scroll-view scroll-y="true" :refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh"
				:refresher-enabled="true" @scrolltolower="toDown" class="h-full">
				<view class="box" v-for="(item,index) in lists">
					<view class="title" @click="info(item)" >【{{item.level}}-{{item.sex}}-{{item.zhiye}}-{{item.jineng}}】</view>
					<view class="flex" @click="info(item)">
						<view class="tab font24" style="width: 20%;color: red;">{{item.price}}元</view>
						<view class="tab font24" style="width: 55%;opacity: 0.5;">{{item.game}}｜{{item.device}}</view>
						<view class="tab font24" style="width: 20%;text-align: right;opacity: 0.5;">{{item.create_at}}</view>
					</view>
					<view class="line"></view>
				</view>
			</scroll-view>
		</view>
		
		<view style="height: 20rpx;"></view>

		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick"
		        :color="color" :selectedColor="selectedColor"></custom-tab-bar>
    </view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
    export default {
        components: {
			CustomTabBar
        },
        data() {
            return {
				currentTab: 1, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				refresherTriggered: false,
				
				lists:[],
				
                filterData: [
                    // [{
                    //     name: '全省',
                    //     value: ''
                    // }],

                    // [{
                    //         name: '美食',
                    //         value: ''
                    //     },
                    //     {
                    //         name: '湘菜',
                    //         value: '1'
                    //     },
                    //     {
                    //         name: '川菜',
                    //         value: '2'
                    //     },
                    //     {
                    //         name: '火锅',
                    //         value: '3'
                    //     }
                    // ],

                    [{
                            name: '排序',
                            value: ''
                        },
                        {
                            name: '等级排序',
                            value: '1'
                        },
                        {
                            name: '最新发布',
                            value: '2'
                        },
                        {
                            name: '价格排序',
                            value: '3'
                        },
						{
						    name: '人气排序',
						    value: '4'
						}
                    ],

                    [
                        {
                            name: '选择游戏',
                            value: '1'
                        },
                        {
                            name: '选择服务器',
                            value: '2'
                        },
						{
						    name: '选择职业',
						    value: '3'
						},
						{
						    name: '选择等级',
						    value: '4'
						}
                    ],
                ],
                //defaultIndex: [0, 0, 0, 0]
				defaultIndex: [0, 0],
				
				sort:'',
				game : '未选择',
				device : '未选择',
				zhiye_name : '未选择',
				max_level : '',
				min_level : '',

				page:1
            }
        },

        mounted() {

            // let cityArr = ['广州市', '深圳市', '佛山市', '东莞市', '中山市', '珠海市', '江门市', '肇庆市', '惠州市', '汕头市', '潮州市', '揭阳市', '汕尾市',
            //     '湛江市', '茂名市', '阳江市', '云浮市', '韶关市', '清远市', '梅州市', '河源市'
            // ]
            // let tmpArr = this.filterData;
            // for (let s of cityArr) {

            //     tmpArr[0].push({
            //         name: s,
            //         value: s
            //     });
            //     console.log("s = ", s);
            // }
            // console.log("filterData = " + JSON.stringify(this.filterData));

            // this.filterData = tmpArr;

        },
		onLoad(options){
			if(options.title){
				this.game = options.title
			}
			this.list() 
		},
        methods: {
			refresherrefresh() {
				this.refresherTriggered = true;
				this.page = 1;
				this.index()
			},
			toDown() {
				this.page++;
				this.list()
			},
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
			   //this.currentTab = index;  

			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
			
            ed(res) {

                console.log('选择res = ' + JSON.stringify(res));
				this.page = 1;
				var sort = '';
				for(var i=0;i<res.length;i++){
					if(i==0){
						sort = res[i][0]['value']
					}
				}
				console.log(sort)
				this.sort = sort
				this.list()
                // uni.showModal({
                //     title: '下拉筛选选择数据',
                //     content: '所选择数据 = ' + JSON.stringify(res)
                // })
            },
			
			ed2(res){
				console.log(res)
				this.page = 1;
				if(res){
					this.game = res[0]['game']
					this.device = res[0]['device']
					this.zhiye_name = res[0]['zhiye_name']
					this.max_level = res[0]['max_level']
					this.min_level = res[0]['min_level']
				}
				
				
				this.list()
			},
			
			list(){
				var that = this
				uni.request({
					url:getApp().globalData.host+'srapi/home/account_list',
					method:'POST',
					data: { // 请求的参数
						sort:that.sort,game:that.game,device:that.device,zhiye_name:that.zhiye_name,max_level:that.max_level,min_level:that.min_level,page:that.page
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (r) => {
						if (that.page == 1) {
							that.lists = r.data.data
						} else {
							that.lists = [...that.lists, ...r.data.data]
						}
					} 
				})
			},
			info(item){
				uni.navigateTo({
					url:'/pages/index/info?item='+JSON.stringify(item)
				})
			},

        }
    }
</script>

<style lang="scss" scoped>
   /* #ifdef H5 */
   	page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
   	/* #endif */
	
	page {
	    padding-bottom: 140rpx;
	}

    .content {
        display: flex;
        flex-direction: column;
        /* background-color: white; */

    }

    .mui-content-padded {
        margin: 6px 14px;
        /* background-color: #ffffff; */
    }

    .lineV {

        margin-top: 0px;
        margin-left: 15px;
        width: calc(100vw - 30px);
        height: 1px;
        background-color: #F5F5F5;

    }
	
	.h-full{
		height: 90vh;
	}

    .hotSearchTitV {
        margin-left: 14px;
        margin-top: 4px;
        width: 170px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #161616;
        line-height: 22px;
    }

    .upView {
        display: flex;
        flex-direction: row;
        height: 26px;
        margin-left: 0px;
    }

    .cellView {
        margin-top: 4px;
        margin-left: 5.8px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-radius: 2px;
        padding: 0px 4px !important;
        font-size: 10px;

        background-color: #f5f5f5;
        color: #818183;
    }

    .moreBtn {

        height: 30px;
        /* background-color: #F5F5F5; */
        text-align: center;
        font-size: 12px;
        line-height: 30px;
        color: #888888;
    }
	
	.lists{
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.title{
		font-size: 28rpx;font-weight: 500;margin-left: 15rpx;
	}
	.flex{
		width: 100%;display: flex;margin-top: 30rpx;padding-bottom: 20rpx;
	}
	.font18{
		font-size: 18rpx;color: #000;color: #2f2f2f; text-align: center;height: auto;
	}
	.font24{
		font-size: 24rpx;color: #000;color: #2f2f2f; text-align: center;height: auto;
	}
	.line{
		width: 100%;
		border-bottom: 1px #eee solid;
		margin-top: 15rpx;
	}
	.box{
		width: 94%;background-color: #fff; border-radius: 20rpx;height: auto; margin-top: 30rpx; margin-left: 3%;
	}
</style>